<template>
    <div class="loginBorder f-cb">
        <div class="loginBorderTitle f-cb">
            <a href="javascript:;" 
            v-for="(item,index) in LoginTitleList" 
            :class="LoginTitleActive==item.id?'hover':''"
            :key="index"
            @click="TitleClick(item.id)"
            >
                {{item.name}}
            </a>
        </div>
        <ul class="f-cb loginBorderUl" v-if="ForgetpasswordShow==false">
            <li v-if="LoginTitleActive==1">
                <h2>{{$t('m.PhoneNumber')}}</h2>
                <div class="box f-cb leftfix">
                    <el-input
                        :placeholder="$t('m.Pleaseenteryourphonenumber')"
                        v-model="register.mobile"
                        class="input-with-select phoneh"
                    >
                    <el-select
                        v-model="register.countryCode"
                        popper-class="leftselect"
                        filterable
                        slot="prepend"
                        :popper-append-to-body="false"
                    >
                        <el-option
                            v-for="item in cities"
                            :key="item.en"
                            :label="'+' + item.code"
                            :value="'+' + item.code"
                        >
                            <span>{{ item[lang] + "+" + item.code }}</span>
                        </el-option>
                    </el-select>
                    </el-input>
                </div>
                <h2>{{$t('m.SMScode')}}</h2>
                <div class="box f-cb">
                    <el-input :placeholder="$t('m.PleaseenterSMScode')" v-model="register.captcha"></el-input>
                    <input type="button" v-model="name" :disabled="disabled" class="code" @click="SendCode('register')"/>
                </div>
                <h2>{{$t('m.loginPassword')}}</h2>
                <div class="box f-cb">
                    <el-input :placeholder="$t('m.PleaseEnterPassword')" v-model="register.password" :type="RegisterPassword">
                        <img src="@/assets/login05_h.png" slot="suffix" v-show="RegisterPassword == 'password'" @click="PasswordChangeClick('RegisterPassword','text')" class="eye"/>
                        <img src="@/assets/login05.png" slot="suffix" v-show="RegisterPassword == 'text'" @click="PasswordChangeClick('RegisterPassword','password')" class="eye"/>
                    </el-input>
                </div>
                <h2>{{$t('m.ConfirmPassword')}}</h2>
                <div class="box f-cb mbnone">
                    <el-input :placeholder="$t('m.ReConfirmPassword')" v-model="register.repassword" :type="RegisterRepassword">
                        <img src="@/assets/login05_h.png" slot="suffix" v-show="RegisterRepassword == 'password'" @click="PasswordChangeClick('RegisterRepassword','text')" class="eye"/>
                        <img src="@/assets/login05.png" slot="suffix" v-show="RegisterRepassword == 'text'" @click="PasswordChangeClick('RegisterRepassword','password')" class="eye"/>
                    </el-input>
                </div>
                <div class="checked f-cb">
                    <span @click="checkedClick($event)" class="checkedSpan fl">{{$t('m.AgreeAndComply')}}</span>
                    <a href="javascript:;" class="fl" @click="isStatementshow()">{{$t('m.PrivacyStatement')}}</a>
                </div>
                <el-button type="primary" class="button" @click="RegisterSubmit">{{$t('m.SignupBtn')}}</el-button>
            </li>
            <li v-else-if="LoginTitleActive==2">
                <h2>{{$t('m.PhoneNumber')}}</h2>
                <div class="box f-cb leftfix">
                    <el-input
                        :placeholder="$t('m.Pleaseenteryourphonenumber')"
                        v-model="PasswordLogin.mobile"
                        class="input-with-select phoneh"
                    >
                    <el-select
                        v-model="PasswordLogin.countryCode"
                        popper-class="leftselect"
                        filterable
                        slot="prepend"
                        :popper-append-to-body="false"
                    >
                        <el-option
                            v-for="item in cities"
                            :key="item.en"
                            :label="'+' + item.code"
                            :value="'+' + item.code"
                        >
                            <span>{{ item[lang] + "+" + item.code }}</span>
                        </el-option>
                    </el-select>
                    </el-input>
                </div>
                <h2>{{$t('m.loginPassword')}}</h2>
                <div class="box f-cb mbnone">
                    <el-input :placeholder="$t('m.PleaseEnterPassword')" v-model="PasswordLogin.password" :type="LoginPassword">
                        <img src="@/assets/login05_h.png" slot="suffix" v-show="LoginPassword == 'password'" @click="PasswordChangeClick('LoginPassword','text')" class="eye"/>
                        <img src="@/assets/login05.png" slot="suffix" v-show="LoginPassword == 'text'" @click="PasswordChangeClick('LoginPassword','password')" class="eye"/>
                    </el-input>
                </div>
                <div class="checked hover f-cb">
                    <a href="javascript:;" class="fr" @click="IsForgetpasswordShow">{{$t('m.ForgotPassword')}}</a>
                </div>
                <el-button type="primary" class="button" @click="LoginSubmit(2)">{{$t('m.Login')}}</el-button>
            </li>
            <li v-else>
                <h2>{{$t('m.PhoneNumber')}}</h2>
                <div class="box f-cb leftfix">
                    <el-input
                        :placeholder="$t('m.Pleaseenteryourphonenumber')"
                        v-model="CaptchaLogin.mobile"
                        class="input-with-select phoneh"
                    >
                    <el-select
                        v-model="CaptchaLogin.countryCode"
                        popper-class="leftselect"
                        filterable
                        slot="prepend"
                        :popper-append-to-body="false"
                    >
                        <el-option
                            v-for="item in cities"
                            :key="item.en"
                            :label="'+' + item.code"
                            :value="'+' + item.code"
                        >
                            <span>{{ item[lang] + "+" + item.code }}</span>
                        </el-option>
                    </el-select>
                    </el-input>
                </div>
                <h2>{{$t('m.SMScode')}}</h2>
                <div class="box f-cb">
                    <el-input :placeholder="$t('m.PleaseenterSMScode')" v-model="CaptchaLogin.captcha"></el-input>
                    <input type="button" v-model="name" :disabled="disabled" class="code" @click="SendCode('login')"/>
                </div>
                <div style="height:20px"></div>
                <el-button type="primary" class="button" @click="LoginSubmit(1)">{{$t('m.Login')}}</el-button>
            </li>
        </ul>
        <div class="f-cb loginBorderUl" v-if="ForgetpasswordShow==true">
            <h2>{{$t('m.PhoneNumber')}}</h2>
            <div class="box f-cb leftfix">
                <el-input
                    :placeholder="$t('m.Pleaseenteryourphonenumber')"
                    v-model="ForgetPassword.mobile"
                    class="input-with-select phoneh"
                >
                    <el-select
                        v-model="ForgetPassword.countryCode"
                        popper-class="leftselect"
                        filterable
                        slot="prepend"
                        :popper-append-to-body="false"
                    >
                        <el-option
                            v-for="item in cities"
                            :key="item.en"
                            :label="'+' + item.code"
                            :value="'+' + item.code"
                        >
                            <span>{{ item[lang] + "+" + item.code }}</span>
                        </el-option>
                    </el-select>
                </el-input>
            </div>
            <h2>{{$t('m.SMScode')}}</h2>
            <div class="box f-cb">
                <el-input :placeholder="$t('m.PleaseenterSMScode')" v-model="ForgetPassword.captcha"></el-input>
                <input type="button" v-model="name" :disabled="disabled" class="code" @click="SendCode('forgetpwd')"/>
            </div>
            <h2>{{$t('m.SetLoginPassword')}}</h2>
            <div class="box f-cb">
                <el-input :placeholder="$t('m.PleaseEnterPassword')" v-model="ForgetPassword.password" :type="ForgetPasswordOne">
                    <img src="@/assets/login05_h.png" slot="suffix" v-show="ForgetPasswordOne == 'password'" @click="PasswordChangeClick('ForgetPasswordOne','text')" class="eye"/>
                    <img src="@/assets/login05.png" slot="suffix" v-show="ForgetPasswordOne == 'text'" @click="PasswordChangeClick('ForgetPasswordOne','password')" class="eye"/>
                </el-input>
            </div>
            <h2>{{$t('m.ConfirmPassword')}}</h2>
            <div class="box f-cb">
                <el-input :placeholder="$t('m.ReConfirmPassword')" v-model="ForgetPassword.repassword" :type="ForgetPasswordTwo">
                    <img src="@/assets/login05_h.png" slot="suffix" v-show="ForgetPasswordTwo == 'password'" @click="PasswordChangeClick('ForgetPasswordTwo','text')" class="eye"/>
                    <img src="@/assets/login05.png" slot="suffix" v-show="ForgetPasswordTwo == 'text'" @click="PasswordChangeClick('ForgetPasswordTwo','password')" class="eye"/>
                </el-input>
            </div>
            <div style="height:20px"></div>
            <el-button type="primary" class="button" @click="ForgetPasswordSubmit">{{$t('m.define')}}</el-button>
        </div>
        <statement :show="isStatement" @closeClick="closeClick" :Data="StatementData"></statement>
    </div>
</template>
<script>
    import list from "@/common/code.json";
    import vPinyin from "@/common/hanziToPinyin.js";
    import Statement from "@/components/popup/statement.vue";
    export default {
        name: "login",
        components: {Statement},
        data() {
            return{
                LoginTitleList:[
                    {name:this.$t('m.Signup'),id:1},
                    {name:this.$t('m.Passwordlogin'),id:2},
                    {name:this.$t('m.codelogin'),id:3}
                ],
                LoginTitleActive:2,
                register:{
                    mobile:"",
                    countryCode:"+86",
                    captcha:"",
                    password:"",
                    repassword:"",
                    from:"",
                },
                PasswordLogin:{
                    mobile:"",
                    countryCode:"+86",
                    password:"",
                    method:"2",
                },
                CaptchaLogin:{
                    mobile:"",
                    countryCode:"+86",
                    captcha:"",
                    method:"1",
                },
                ForgetPassword:{
                    mobile:"",
                    countryCode:"+86",
                    captcha:"",
                    password:"",
                    repassword:"",
                },
                ForgetpasswordShow:false,
                RegisterPassword:'password',
                RegisterRepassword:'password',
                LoginPassword:"password",
                ForgetPasswordOne:"password",
                ForgetPasswordTwo:"password",
                isStatement:false,
                StatementData:{},
                cities:[],
                lang:"zh-CN",
                name:this.$t('m.getSMScode'),
                disabled: false,
                CountDown:null,
                auth_time:60,
                reg:/^(?!(?:[0-9]+|[a-zA-Z]+|[-\/\\^$*+?.()|[\]{}]+)$)[!-~]{8,16}$/,
                locationLink:{},
                pdflinks:"",
            };
        },
        mounted(){
            this.$nextTick(function() {
                window.document.title = this.$t('m.LoginAndRegister')
                this.$i18n.locale = sessionStorage.getItem("lang");
                this.lang = sessionStorage.getItem("lang");
                var _this = this;
                if(window.location.href.indexOf("?") != -1){
                    var links = window.location.href.split('?')[1].split('&');
                    links.forEach(function(res){
                        _this.locationLink[res.split('=')[0]] =res.split('=')[1]
                    })
                    _this.register.from = _this.locationLink.from;
                }
                console.log(this.lang)
                list.forEach(element => {
                    element.lang = this.lang;
                });
                // console.log(this.lang)
                list.sort(function(a, b) {
                    var x, y;
                    x = vPinyin.chineseToPinYin(a[a.lang]).toLowerCase();
                    y = vPinyin.chineseToPinYin(b[a.lang]).toLowerCase();
                    if (x < y) {
                        return -1;
                    }
                    if (x > y) {
                        return 1;
                    }
                    return 0;
                });
                this.cities = list;
                this.getagreement();
            })
        },
        beforeDestroy() {
            clearInterval(this.CountDown);
        },
        methods: {
            //点击打开注册协议
            isStatementshow(){
                var _this = this;
                if(_this.pdflinks == ""){
                    _this.isStatement = true;
                }else{
                    window.open(_this.pdflinks);
                }
            },
            //点击是否显示忘记密码
            IsForgetpasswordShow(){
                this.ForgetpasswordShow = !this.ForgetpasswordShow;
            },
            //点击切换标题
            TitleClick(id){
                this.LoginTitleActive = id;
                if(this.ForgetpasswordShow){
                    this.ForgetpasswordShow = false;
                }
                this.name = this.$t('m.getSMScode');
                clearInterval(this.CountDown);
                this.disabled = false;
                this.auth_time = 60;
                this.register.captcha = "";
                this.ForgetPassword.captcha = "";
                this.CaptchaLogin.captcha = "";
            },
            //关闭弹框
            closeClick(msg){
                this[msg] = false;
            },
            //密码框点击显示隐藏
            PasswordChangeClick(name,msg){
                this[name] = msg;
            },
            //选中隐私声明切换
            checkedClick(event){
                var event = $(event.target).parents('.checked')
                if(event.hasClass('hover')){
                    event.removeClass('hover')
                }else{
                    event.addClass('hover')
                }
            },
            SendCode(event){
                console.log(event);
                var _this = this,countryCode,mobile;
                if(event == 'register'){
                    if(_this.register.mobile == ""){
                        this.$message({
                            message: this.$t('m.Pleaseenteryourphonenumber'),
                            type: "warning",
                            duration:2000,
                        });
                        return false;
                    }else{
                        countryCode = _this.register.countryCode;
                        mobile = _this.register.mobile;
                    }
                }else if(event == 'login'){
                    if(_this.CaptchaLogin.mobile == ""){
                        this.$message({
                            message: this.$t('m.Pleaseenteryourphonenumber'),
                            type: "warning",
                            duration:2000,
                        });
                        return false;
                    }else{
                        countryCode = _this.CaptchaLogin.countryCode;
                        mobile = _this.CaptchaLogin.mobile;
                    }
                }else{
                    if(_this.ForgetPassword.mobile == ""){
                        this.$message({
                            message:this.$t('m.Pleaseenteryourphonenumber'),
                            type: "warning",
                            duration:2000,
                        });
                        return false;
                    }else{
                        countryCode = _this.ForgetPassword.countryCode;
                        mobile = _this.ForgetPassword.mobile;
                    }
                }
                this.$axios.post('/sms/send',{
                    countryCode:countryCode,
                    mobile:mobile,
                    event:event,
                })
                .then(res => {
                    if(res.data.code == 1){
                        this.$message({
                            message: res.data.msg,
                            type: "success"
                        });
                        _this.codeClick();
                    }else{
                        this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    
                })
                .catch(function(error) {
                    this.$message({
                        message: error,
                        type: "warning",
                        duration:2000,
                    });
                })
            },
            //60秒倒计时
            codeClick(){
                var _this = this;
                this.disabled = true;
                this.CountDown = setInterval(() => {
                    _this.auth_time--;
                    _this.name = _this.auth_time + _this.$t('m.ResendInSeconds');
                    if (_this.auth_time <= 0) {
                        _this.disabled = false;
                        _this.name = _this.$t('m.getSMScode');
                        clearInterval(_this.CountDown);
                        _this.auth_time = 60;
                    }
                }, 1000);
            },
            //注册
            RegisterSubmit(){
                var _this = this;
                if(_this.register.mobile == ""){
                    _this.$message({
                        message: _this.$t('m.Pleaseenteryourphonenumber'),
                        type: "warning",
                        duration:2000,
                    });
                    return false;
                }
                if(_this.register.captcha == ""){
                    _this.$message({
                        message: _this.$t('m.PleaseenterSMScode'),
                        type: "warning",
                        duration:2000,
                    });
                    return false;
                }else if(_this.register.password==""){
                    _this.$message({
                        message: _this.$t('m.PleaseenterloginPassword'),
                        type: "warning",
                        duration:2000,
                    });
                    return false;
                }else if(!_this.reg.test(_this.register.password)){
                    _this.$message({
                        message: _this.$t('m.PleaseEnterPasswordS'),
                        type: "warning",
                        duration:2000,
                    });
                    return false;
                }else if(_this.register.repassword==""){
                    _this.$message({
                        message: _this.$t('m.ReConfirmPasswordNone'),
                        type: "warning",
                        duration:2000,
                    });
                    return false;
                }else if(_this.register.repassword != _this.register.password){
                    _this.$message({
                        message: _this.$t('m.inconsistent'),
                        type: "warning",
                        duration:2000,
                    });
                    return false;
                }else if(!$('.checked').hasClass('hover')){
                    _this.$message({
                        message: _this.$t('m.AgreeAndComply')+_this.$t('m.PrivacyStatement'),
                        type: "warning",
                        duration:2000,
                    });
                    return false;
                }
                this.$axios.post('/user/register',_this.register)
                .then(res => {
                    if(res.data.code == 1){
                        sessionStorage.setItem("info", JSON.stringify(res.data.data));
                        sessionStorage.setItem("token", res.data.data.token);
                        //判断 open_status 1:未开户，2已经开户(审核成功)，3待审核，4审核未通过，5待完善
                        if( res.data.data.open_status ==1 || res.data.data.open_status ==5){
                           _this.$router.push({ path:res.data.data.redirect_url});
                        }else{
                           _this.$router.replace({ path:'/examine'});
                        }
                    }else{
                        this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    
                })
                .catch(function(error) {
                    this.$message({
                        message: error,
                        type: "warning",
                        duration:2000,
                    });
                })
                
            },
            //密码验证码登录
            LoginSubmit(type){
                var _this = this;
                if(type == 2){
                    //密码登录
                    if(_this.PasswordLogin.mobile == ""){
                        _this.$message({
                            message:_this.$t('m.Pleaseenteryourphonenumber'),
                            type: "warning",
                            duration:2000,
                        });
                        return false;
                    }else if(_this.PasswordLogin.password==""){
                        _this.$message({
                            message:_this.$t('m.PleaseenterloginPassword'),
                            type: "warning",
                            duration:2000,
                        });
                        return false;
                    }
                }else{
                    //验证码登录
                    if(_this.CaptchaLogin.mobile == ""){
                        _this.$message({
                            message:_this.$t('m.Pleaseenteryourphonenumber'),
                            type: "warning",
                            duration:2000,
                        });
                        return false;
                    }else if(_this.CaptchaLogin.captcha==""){
                        _this.$message({
                            message:_this.$t('m.PleaseenterSMScode'),
                            type: "warning",
                            duration:2000,
                        });
                        return false;
                    }
                }
                _this.$axios.post('/user/login',type==2?_this.PasswordLogin:_this.CaptchaLogin)
                .then(res => {
                    sessionStorage.setItem("info", JSON.stringify(res.data.data));
                    sessionStorage.setItem("token", res.data.data.token);
                    if(res.data.code == 1){
                        //判断 open_status 1:未开户，2已经开户(审核成功)，3待审核，4审核未通过，5待完善
                        if( res.data.data.open_status ==1 || res.data.data.open_status ==5){
                           _this.$router.push({ path:res.data.data.redirect_url});
                        }else{
                           _this.$router.replace({ path:'/examine'});
                        }
                    }else{
                        this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    
                })
                .catch(function(error) {
                    console.log(error)
                })
            },
            //修改密码
            ForgetPasswordSubmit(){
                var _this = this;
                if(_this.ForgetPassword.captcha == ""){
                    _this.$message({
                        message: _this.$t('m.PleaseenterSMScode'),
                        type: "warning",
                        duration:2000,
                    });
                    return false;
                }else if(_this.ForgetPassword.password==""){
                    _this.$message({
                        message: _this.$t('m.PleaseenterloginPassword'),
                        type: "warning",
                        duration:2000,
                    });
                    return false;
                }else if(!_this.reg.test(_this.ForgetPassword.password)){
                    _this.$message({
                        message: _this.$t('m.PleaseEnterPasswordS'),
                        type: "warning",
                        duration:2000,
                    });
                    return false;
                }else if(_this.ForgetPassword.repassword==""){
                    _this.$message({
                        message: _this.$t('m.ReConfirmPasswordNone'),
                        type: "warning",
                        duration:2000,
                    });
                    return false;
                }else if(_this.ForgetPassword.repassword != _this.ForgetPassword.password){
                    _this.$message({
                        message: _this.$t('m.inconsistent'),
                        type: "warning",
                        duration:2000,
                    });
                    return false;
                }
                _this.$axios.post('/user/resetPass',_this.ForgetPassword)
                .then(res => {
                    if(res.data.code == 1){
                        this.$message({
                            message: res.data.msg,
                            type: "success"
                        });
                        this.TitleClick(2)
                    }else{
                        this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(function(error) {
                    console.log(error)
                })
            },
            //获取注册协议
            getagreement(){
                var _this = this;
                _this.$axios.get('/agreement',{params:{
                    type:2,
                    pageSize:1,
                }})
                .then(res => {
                    if(res.data.code == 1){
                        console.log(this.lang)
                        var lang = this.lang=='zh-CN'?'zh':'en'
                        if(res.data.data[0]['pdf_url_'+lang] == ""){
                            _this.getagreementinfo(res.data.data[0].id)
                        }else{
                            this.pdflinks = res.data.data[0]['pdf_url_'+lang];
                        }
                    }else{
                        _this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    
                })
                .catch(function(error) {
                    console.log(error)
                })
            },
            getagreementinfo(id){
                var _this = this;
                _this.$axios.get('/agreement/'+id)
                .then(res => {
                    if(res.data.code == 1){
                        this.StatementData = res.data.data;
                    }else{
                        _this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    
                })
                .catch(function(error) {
                    console.log(error)
                })
            }
        },
        watch:{

        }
    }
</script>
<style lang="less">
    .loginBorder{
        width: 560px;
        padding:0 110px;
        border-radius:3px;
        box-shadow: 0 0 20px rgba(240,240,240,.8);
        margin:0 auto;
        .loginBorderTitle{
            width: 110%;
            text-align: center;
            padding:51px 0 31px;
            margin-left: -5%;
            font-size: 0;
            a{
                display: inline-block;
                padding: 0 15px 0 35px;
                font-size: 14px;
                line-height: 34px;
                color: @titleColor;
                position: relative;
                background-size: 18px auto !important;
                background-repeat: no-repeat !important;
                background-position:15px center !important;
                transition: all 0.3s;
            }
            a:hover,a.hover{
                color: @hoverColor;
            }
            a:after{
                content:"";
                width: 1px;
                height: 14px;
                position: absolute;
                background: #989eb3;
                left:0;
                top:50%;
                margin-top: -7px;
            }
            a:first-child:after{
                display: none;
            }
            a:first-child{
                background-image: url(~@/assets/login01.png);
            }
            a:first-child:hover,a:first-child.hover{
                background-image: url(~@/assets/login01_h.png);
            }
            a:nth-child(2){
                background-image: url(~@/assets/login02.png);
            }
            a:nth-child(2):hover,a:nth-child(2).hover{
                background-image: url(~@/assets/login02_h.png);
            }
            a:nth-child(3){
                background-image: url(~@/assets/login03.png);
            }
            a:nth-child(3):hover,a:nth-child(3).hover{
                background-image: url(~@/assets/login03_h.png);
            }
        }
        .loginBorderUl{
            width: 100%;
            padding-bottom: 72px;
            .box{
                border:1px solid @titleColor;
                border-radius:3px;
                line-height: 38px;
                margin-bottom: 21px;
                position: relative;
                .el-input__suffix{
                    cursor: pointer;
                }
                .eye{
                    width: 20px;
                    display: block;
                    margin-top: 9px;

                }
            }
            .box.mbnone{
                margin-bottom:0px;
            }
            .el-input__inner{
                height:38px;
                line-height:38px;
                border:none;
                color: #666;
                font-size: 12px;
                border-radius:3px;
            }
            .el-input-group__prepend{
                background:none;
                border:none;
                border-radius:3px;
                padding: 0 20px;
                width: 80px;
            }
            h2{
                font-size: 12px;
                color: @b0b0b2;
                line-height: 31px;
                padding: 0;
                margin: 0;
            }
            .code{
                text-align: center;
                height: 40px;
                line-height: 40px;
                background: @hoverColor;
                color: @fff;
                font-size: 12px;
                border:none;
                border-radius:0 3px 3px 0;
                position: absolute;
                right:0px;
                top:0px;
                cursor: pointer;
            }
            .checked{
                font-size: 12px;
                margin-top: 5px;
                color: @titleColor;
                line-height: 32px;
                cursor: pointer;
                .checkedSpan{
                    padding-left:22px;
                    background: url(~@/assets/login06.png) no-repeat left center;
                    background-size: 13px auto !important;
                }
                a{
                    color: @hoverColor;
                }
            }
            .button{
                margin-top: 30px;
            }
            .checked.hover .checkedSpan{
                background: url(~@/assets/login06_h.png) no-repeat left center;
            }
            input:-moz-placeholder,textarea:-moz-placeholder,.el-input__inner:-moz-placeholder{
                color: @titleColor;
            }

            input::-moz-placeholder,textarea::-moz-placeholder,.el-input__inner::-moz-placeholder{
                color: @titleColor;
            }

            input:-ms-input-placeholder,textarea:-ms-input-placeholder,.el-input__inner:-ms-input-placeholder{
                color: @titleColor;
            }

            input::-webkit-input-placeholder,textarea::-webkit-input-placeholder,.el-input__inner::-webkit-input-placeholder{
                color: @titleColor;
            }
        }
    }
</style>